<style>
    .rrrr {
        padding-top: 10px;
        text-align: right;
    }
</style>
<div class="modal-dialog">
    <div class="modal-content radius">
        <div class="modal-header">
            <h3 class="modal-title">学生注册</h3>
            <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();" id="closeBtn1">×</a>
        </div>
        <div class="modal-body">
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">学&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
                <div class="formControls col-xs-8">
                    <input id="number1" name="" type="text" placeholder="学号" class="input-text size-L">
                </div>
            </div>
            <br>
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
                <div class="formControls col-xs-8">
                    <input id="name1" name="" type="text" placeholder="王兴起" class="input-text size-L">
                </div>
            </div>
            <br>
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                <div class="formControls col-xs-8">
                    <input id="pwd1" name="" type="password" placeholder="密码" class="input-text size-L">
                </div>
            </div>
            <br>
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">确认密码:</label>
                <div class="formControls col-xs-8">
                    <input id="verifiedPwd1" name="" type="password" placeholder="确认密码" class="input-text size-L">
                </div>
            </div>
            <br>
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">所属老师:</label>
                <div class="formControls col-xs-8">
                    <label>
                        <select class="select" size="1" id="teacherSelector">
                            <option value="" selected>选择老师</option>
                            <#list teachers as teacher>
                                <option value="${teacher.userId}">${teacher.userId}:${teacher.teacherName}</option>
                            </#list>

                        </select>
                    </label>
                </div>
            </div>
            <br>
            <div class="row cl" style="display: none">
                <label class="form-label col-xs-2 col-offset-1 rrrr">所属班级:</label>
                <div class="formControls col-xs-8">
                    <label>
                        <select class="select" size="1" id="classSelector">
                        </select>
                    </label>
                </div>
            </div>
            <br>
            <div class="row cl">
                <label class="form-label col-xs-2 col-offset-1 rrrr">验 证 码:</label>
                <div class="formControls col-xs-8">
                    <input id='inputCaptcha2' class="input-text size-L" type="text" placeholder="验证码"
                           onclick="if(this.value=='验证码:'){this.value='';}" value="" style="width:150px;">
                    <img id="captcha2" onclick="changeCaptcha('captcha2')"> <a
                            href="javascript:changeCaptcha('captcha2')">看不清，换一张</a></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" id="register">注册</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true" id="closeBtn2">关闭</button>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#teacherSelector").change(function () {
            if ('' !== $("#teacherSelector").val()) {
                $.ajax({
                    url: '/stu/register/class/' + $("#teacherSelector").val(),
                    type: 'GET',
                    dataType: "json",
                    success: function (classes) {
                        $("#classSelector").html('');
                        $("#classSelector").append('<option value="" selected>请选择班级</option>');
                        for (var i = 0; i < classes.length; i++) {
                            $("#classSelector").append('<option value="' + classes[i].classId + '">' + classes[i].classNum + '</option>');
                        }
                        $("#classSelector").parent().parent().parent().css('display', '');
                    }
                });
            }
        });
        $("#closeBtn1,#closeBtn2").on("click", function () {
            changeCaptcha('captcha1');
        });
        $("#register").on("click", function () {
            var number = $("#number1").val();
            if (number.trim() === '') {
                alert("用户名不能为空");
                return;
            }
            var name = $("#name1").val();
            if (name.trim() === '') {
                alert("姓名不能为空");
                return;
            }
            var password = $("#pwd1").val();
            if (password.trim() === '') {
                alert("密码不能为空");
                return;
            }
            var vpwd = $("#verifiedPwd1").val();
            if (password !== vpwd) {
                alert("两次密码不一样");
                return;
            }
            var teacherId = $("#teacherSelector").val();
            if (teacherId.trim() === '') {
                alert("请选择教师");
                return;
            }
            var classId = $("#classSelector").val();
            if (classId.trim() === '') {
                alert("请选择班级");
                return;
            }
            $.ajax({
                url:'/stu/register',
                type: 'POST',
                cache: false,
                data: {number: number, pwd: password,verifiedPwd: vpwd,
                    name: name, teacherId: teacherId, classId: classId,
                    captcha: $("#inputCaptcha2").val()},
                dataType: "json",
                success: function (data) {
                    if (!data.success) {
                        alert(data.msg);
                        changeCaptcha();
                    } else {
                        alert(data.msg);
                        window.location = "/stu/login";
                    }
                },
                error: function () {
                    alert("服务器正忙，请稍候重试");
                }
            });
        });
    });
</script>